<template>
  <!-- 部门管理 -->
  <div id="MenuManage" class="content-main">
    <el-row>
      <!-- 左边的编辑框  -->
      <el-col :span="10" style="min-height: inherit; padding: 0px 0px 0px 0px;overflow: auto;">
        <!-- <el-col :span="demoData === 1?10:24" style="min-height: inherit; padding: 0px 0px 0px 0px;overflow: auto;"> -->
        <el-card style="height: calc( 100vh - 85px); overflow: auto">
          <div class="btn-group title">
            <!--  v-permission="'MenuManage-add'" -->
            <el-button type="primary" plain size="mini" @click="addMenu">
              <i class="el-icon-plus" /> 新增部门
            </el-button>
          </div>
          <div style="border-bottom: 1px solid #000; margin-bottom: 15px" />
          <div class="permission-group">
            <div class="search-group" style="margin-bottom:15px">
              <!-- <el-input v-model.trim="filterText" :placeholder="$t('text.deptName')">
                <i slot="prefix" class="el-input__icon el-icon-search" />
              </el-input> -->
            </div>
            <el-tree ref="tree" :data="tableData" node-key="id" :props="defaultProps" :filter-node-method="filterNode">
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <template v-if="node.label !== '根目录'">
                  <span>{{ node.label }}</span>
                  <span>
                    <!-- v-permission="'MenuManage-edit'" -->
                    <el-button size="mini" type="text" icon="el-icon-edit" style="width:26px;height:26px" circle @click="editMenu(data)" />
                    <!--  v-permission="'MenuManage-delete'" -->
                    <el-button size="mini" type="text" icon="el-icon-delete" style="width:26px;height:26px" circle @click="deleteMenu(data)" />
                  </span>
                </template>
              </span>
            </el-tree>
          </div>
        </el-card>
      </el-col>
      <!-- 右边的编辑框 -->
      <el-col id="rightcol" :span="14" style="min-height: inherit; padding: 0px 0px 0px 7px">
        <!-- <el-col id="rightcol" v-permission="'MenuManage-add'" :span="14" style="min-height: inherit; padding: 0px 0px 0px 7px"> -->
        <el-card style="height: calc( 100vh - 85px); overflow: auto">
          <div class="form-title title" style="margin-top:-3px">
            <i class="el-icon-s-grid" style="color: rgb(24, 144, 255); font-size: 18px" />
            <span style="margin-left: 5px;margin-top:-2px">{{ deptName }}</span>
          </div>
          <div style="border-bottom: 1px solid #000; margin: 11px 0" />
          <el-form v-if="publicShow" size="mini" label-width="100px">
            <el-form-item label="部门名">
              <el-input v-model.trim="DeptData.deptName" placeholder="部门名" />
            </el-form-item>
            <!-- <el-form-item :label="$t('text.MenuUrl')">
              <el-input v-model.trim="DeptData.menuUrl" :placeholder="$t('text.MenuUrl')" />
            </el-form-item> -->
            <!-- <el-form-item :label="$t('text.MenuSort')">
              <el-input-number v-model="DeptData.menuIndex" :min="1" controls-position="right" />
            </el-form-item> -->
            <el-form-item label="上级部门">
              <el-select ref="selectParent" v-model="DeptData.parentId" style="width:100%" placeholder="上级部门">
                <el-option :value="DeptData.parentId" :label="parentValue" style="height:200px;overflow:auto">
                  <el-tree :data="rootTableData" node-key="id" :props="defaultProps" accordion @node-click="parentClick" />
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button v-if="editMenuShow" type="primary" @click="editMenuClick">{{ $t('button.Change') }}</el-button>
              <el-button v-if="addMenuShow" type="primary" @click="addDeptClick">{{ $t('button.Add') }}</el-button>
              <el-button @click="cancelShow">{{ $t('button.Cancel') }}</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  GetTreeDept,
  AddDept,
  UpdateDept,
  DeleteDept
} from '@/api/manage'
import { Message } from 'element-ui'
import permission from '@/permission/index.js' // 权限判断指令
export default {
  name: 'DeptManage',
  directives: { permission },
  data() {
    return {
      // 传输数据的 重置名字
      defaultProps: {
        children: 'child',
        label: 'deptName'
      },
      // 查询数据
      queryObj: {
        userName: '' // 登录ip
      },
      // 提交或者修改的数据
      DeptData: {
        id: 0,
        menuIndex: 1, // 排序
        deptName: '', // 菜单名称
        menuUrl: '', // 菜单路径
        'menuIcon': '',
        menuType: 0, // 菜单类型
        'enabled': true,
        parentId: '' // 上级菜单
      },
      listLoading: true,
      tableData: [],
      // 根目录
      rootTableData: [],
      // 新增菜单显示
      addMenuShow: false,
      // 编辑菜单显示
      editMenuShow: false,
      // 公用菜单显示
      publicShow: false,
      // 右侧编辑菜单名
      deptName: '',
      // 上级菜单lable 显示文字
      parentValue: 0,
      // 搜索框绑定数据
      filterText: '',
      // 判断右侧菜单是否显示
      demoData: 1
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.queryData()
    // console.log(document.getElementById('rightcol'))
    if (document.getElementById('rightcol') === null) {
      this.demoData = 2
    }
  },
  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.listLoading = true
      const res = await GetTreeDept()
      this.tableData = res.data.data
      this.rootTableData = res.data.data
      this.rootTableData.unshift({ id: 0, deptName: '根目录', child: [] })
      this.listLoading = false
    },

    // 新增菜单
    addMenu() {
      this.deptName = '新增部门'
      this.editMenuShow = false
      this.addMenuShow = true
      this.publicShow = true
      this.resetMenu()
    },
    // 新增后的重置名称路径
    resetMenu() {
      this.DeptData.deptName = ''
      this.DeptData.menuUrl = ''
      this.DeptData.id = 0
    },
    // 新增菜单确认按钮
    async addDeptClick() {
      if (
        this.DeptData.deptName === '' ||
        this.DeptData.parentId === ''
      ) {
        return Message.error('创建失败，选项没有填选完整')
      }
      this.DeptData.id = 0
      await AddDept({
        'deptName': this.DeptData.deptName,
        'parentId': this.DeptData.parentId
      })
      Message.success(this.$t('text.OperateSuccessfully'))
      this.queryData()
      this.resetMenu()
    },
    // 编辑菜单
    editMenu(data) {
      this.deptName = '编辑部门'
      this.addMenuShow = false
      this.editMenuShow = true
      this.publicShow = true
      // console.log(this.rootTableData, '目录菜单')
      this.DeptData.id = data.id
      this.DeptData.menuIndex = data.menuIndex
      this.DeptData.deptName = data.deptName
      this.DeptData.parentId = data.parentId
      console.log(this.DeptData, data, 123123)
      this.rootTableData.forEach((item) => {
        if (item.id === data.parentId) {
          // console.log(123, item.deptName)
          this.parentValue = item.deptName
        }
        // console.log(item.child)
        if (item.child) {
          if (item.child.length > 0) {
            item.child.forEach((value) => {
            // console.log(value, 'value')
              if (value.id === data.parentId) {
              // console.log(123, item.deptName)
                this.parentValue = value.deptName
              }
            })
          }
        }
      })
    },
    // 编辑菜单的修改按钮功能
    async editMenuClick() {
      // console.log(this.DeptData)
      await UpdateDept({
        'id': this.DeptData.id,
        'deptName': this.DeptData.deptName,
        'parentId': this.DeptData.parentId
      })
      this.queryData()
      Message.success(this.$t('text.OperateSuccessfully'))
    },
    // 菜单取消功能
    cancelShow() {
      this.deptName = this.$t('button.EditMenu')
      this.addMenuShow = false
      this.editMenuShow = false
      this.publicShow = false
      this.DeptData = {
        id: 0,
        menuIndex: 1, // 排序
        deptName: '', // 菜单名称
        menuUrl: '', // 菜单路径
        'menuIcon': '',
        menuType: 0, // 菜单类型
        'enabled': true,
        parentId: '' // 上级菜单
      }
    },
    // 上级菜单的option点击
    parentClick(data, node, self) {
      // console.log(data, node, self, '123')
      this.parentValue = data.deptName
      this.DeptData.parentId = data.id
      // console.log(data.parentId)
      this.$refs.selectParent.blur()
    },
    // 删除菜单
    deleteMenu(data) {
      // const parent = node.parent
      // const children = parent.data.children || parent.data
      // const index = children.findIndex(d => d.id === data.id)
      // children.splice(index, 1)
      console.log(data)
      this.$confirm('确认删除该部门吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // console.log('确认')
          await DeleteDept({ id: data.id })
          Message.success(this.$t('text.OperateSuccessfully'))
          this.queryData()
        })
        .catch(() => {
          // console.log('取消')
        })
    },
    // 搜索菜单
    filterNode(value, data) {
      if (!value) return true
      return data.deptName.indexOf(value) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
<style lang="scss">
.ivu-tree-title {
  span {
    color: #000;
  }
}
</style>
<style scoped lang="scss">
.content-main {
  min-height: 88vh;
}
.left-content {
  padding: 5px;
}
.btn-group {
  display: flex;
  margin-bottom: 15px;
  margin-top: -7px;
}
.tree-group {
  // overflow-y: auto;
  height: inherit;
  max-height: 72vh;
  margin-top: 10px;
}
.title {
  min-height: 33px;
}
.form-title {
  display: flex;
  align-items: center;
}
</style>
